<template>
  <div class="order">
    <head class="btn">
        <div>
            <div class="three"></div>
            <span class="ding">订单管理</span>
        </div>
        <div>
            <el-button class="bt" icon="el-icon-refresh">刷新</el-button>
            <el-button class="bt" icon="el-icon-arrow-left">返回</el-button>
        </div>
    </head>
    <el-card class="box-card">
     
        <div slot="header" class="clearfix">
            <span>数据筛选</span>
            <el-button style="float: right; padding: 3px 0;colo" type="text" @click="dialogFormVisible = true">高级搜素</el-button>
          </div>
         <div class="nei">
        <span class="zi">订单编号</span>: <el-input v-model="input" placeholder="订单编号" ></el-input>
         <span class="zi">订单编号</span>:

         <el-select v-model="value" placeholder="请选择提交时间">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        
        </el-select>

       

        <span class="zi">会员名称</span>: <el-input v-model="input" placeholder="请输入会员名称" class="hui"></el-input>
         <el-button type="primary"  icon="el-icon-search">查询</el-button>
        <el-button >重置</el-button>
         </div>
         <!-- 数据列表 -->
         <div class="shu">
       <div> <span>数据列表</span></div>
        <div><el-button class="add" @click="addOrder">添加订单</el-button>
        <el-button class="dao" icon="el-icon-upload2">导出</el-button></div>
        </div>
    <!-- 表格数据 -->
    <el-table :data="tableData"  border style="width: 100%" class="gou">
            <el-table-column prop="order_number" label="订单编号"  width="120"></el-table-column>
            <el-table-column prop="username" label="购买人"  width="60"></el-table-column>
            <el-table-column prop="telephone" label="电话"  width="120"></el-table-column>
            <el-table-column prop="shr" label="收货人"  width="60"></el-table-column>
            <el-table-column prop="shdz" label="收货电话"  width="120"></el-table-column>
            <el-table-column prop="shdq" label="收获地区"  width="120"></el-table-column>
            <el-table-column prop="Salesperson" label="销售人"  width="60"></el-table-column>
            <el-table-column prop="gmsp" label="购买商品"  width="120" ></el-table-column>
            <el-table-column prop="gmsl" label="购买数量"  width="60"></el-table-column>
             <el-table-column prop="spdw" label="商品单位"  width="80"></el-table-column>
            <el-table-column prop="yf" label="运费"  width="60"></el-table-column>
            <el-table-column prop="dje" label="订单金额"  width="120"></el-table-column>
            <el-table-column prop="jyje" label="交易金额"  width="110"></el-table-column>
            <el-table-column prop="sfje" label="实付金额"  width="100"></el-table-column>
            <el-table-column prop="xdsj" label="下单时间"  width="120"></el-table-column>
            <el-table-column prop="wcsj" label="完成时间"  width="120"></el-table-column>
            <el-table-column prop="jdzt" label="订单状态"  width="100"></el-table-column>
            <el-table-column prop="cz" label="操作"  width="120">
                <button class="a">查看</button>
               <button class="a" @click="goedit">编辑</button>
            </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination
  background
  layout="prev, pager, next,sizes"
  :page-sizes="[10,20,30]"
  :total="500">

</el-pagination>



<!-- 高级搜索提示框 -->
<el-dialog title="高级搜索" :visible.sync="dialogFormVisible" >
  <el-form :model="form">
    <el-input v-model="form.name" autocomplete="off" placeholder="活动名称"></el-input>
    <el-input v-model="form.name" autocomplete="off" placeholder="会员名称"></el-input>
   <el-input v-model="form.name" autocomplete="off" placeholder="会员电话"></el-input>
    <el-input v-model="form.name" autocomplete="off" placeholder="收货人"></el-input>
    <el-input v-model="form.name" autocomplete="off" placeholder="收货电话"></el-input>
    <el-input v-model="form.name" autocomplete="off" placeholder="购买商品"></el-input>
    <!-- s时间 -->
    <el-time-select placeholder="创建开始时间" v-model="startTime"
    :picker-options="{ start: '08:30', step: '00:15', end: '18:30'}">
  </el-time-select>
  <el-time-select placeholder="创建结束时间" v-model="endTime"
    :picker-options="{  start: '08:30', step: '00:15', end: '18:30', minTime: startTime }">
  </el-time-select>
  <el-time-select placeholder="支付凭证上传开始时间" v-model="startTime"
    :picker-options="{ start: '08:30', step: '00:15', end: '18:30'}">
  </el-time-select>
  <el-time-select placeholder="支付凭证上传结束时间" v-model="endTime"
    :picker-options="{  start: '08:30', step: '00:15', end: '18:30', minTime: startTime }">
  </el-time-select>
  <el-time-select placeholder="发货凭证上传开始时间" v-model="startTime"
    :picker-options="{ start: '08:30', step: '00:15', end: '18:30'}">
  </el-time-select>
  <el-time-select placeholder="发货凭证上传结束时间" v-model="endTime"
    :picker-options="{  start: '08:30', step: '00:15', end: '18:30', minTime: startTime }">
  </el-time-select>
  <el-time-select placeholder="收货开始时间" v-model="startTime"
    :picker-options="{ start: '08:30', step: '00:15', end: '18:30'}">
  </el-time-select>
  <el-time-select placeholder="收货结束时间" v-model="endTime"
    :picker-options="{  start: '08:30', step: '00:15', end: '18:30', minTime: startTime }">
  </el-time-select>
  <el-time-select placeholder="完成开始时间" v-model="startTime"
    :picker-options="{ start: '08:30', step: '00:15', end: '18:30'}">
  </el-time-select>
  <el-time-select placeholder="完成结束时间" v-model="endTime"
    :picker-options="{  start: '08:30', step: '00:15', end: '18:30', minTime: startTime }">
  </el-time-select>
 
  </el-form>

  <div slot="footer" class="dialog-footer">
    <span class="clear">清除条件</span>
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>
</el-card>



  </div>
</template>

<script>
export default {
    name:'order',
  data () {
    return {
        input:'',
        options: [{
          value: '选项1',
          label: '2022/10/13'
        }],
        value:'',
        startTime: '',
        endTime: '',
        // 表格内容
        tableData: [
            {
        order_number: '202204220001',
        username: '张三',
        telephone: '18888888888',
        shr:'张三',
        shdz:'18888888888',
        shdq:'河北-石家庄',
        Salesperson:'张三',
        gmsp:'金银花 统货',
        gmsl:'500',
        spdw:'公斤',
        yf:'0.00',
        dje:'120000.00',
        jyje:'100000.00',
        sfje:'80000.00',
        xdsj:'2023-03-16 15:16:17',
        wcsj:'2023-03-16 15:16:17',
        jdzt:'已完成',
        },
        {
        order_number: '202204220001',
        username: '张三',
        telephone: '18888888888',
        shr:'张三',
        shdz:'18888888888',
        shdq:'河北-石家庄',
        Salesperson:'张三',
        gmsp:'金银花 统货',
        gmsl:'500',
        spdw:'公斤',
        yf:'0.00',
        dje:'120000.00',
        jyje:'100000.00',
        sfje:'80000.00',
        xdsj:'2023-03-16 15:16:17',
        wcsj:'',
        jdzt:'待上传支付凭证'
        },
        {
        order_number: '202204220001',
        username: '张三',
        telephone: '18888888888',
        shr:'张三',
        shdz:'18888888888',
        shdq:'河北-石家庄',
        Salesperson:'张三',
        gmsp:'金银花 统货',
        gmsl:'500',
        spdw:'公斤',
        yf:'0.00',
        dje:'120000.00',
        jyje:'100000.00',
        sfje:'80000.00',
        xdsj:'2023-03-16 15:16:17',
        wcsj:'2023-03-16 15:16:17',
        jdzt:'已完成',
        },
       ],
        dialogFormVisible: false,
        form: {
          name: ''
        },
        formLabelWidth: '80px'
    };
  },

  components: {},

  computed: {},


  methods: {
    goedit(){
      this.$router.push('/edit')
      
    },
    addOrder(){
      this.$router.push('/addOrder')
    }
  }
}

</script>
<style lang='scss' scoped>

.order{
    width: 100%;
    height: 100vh;
    border: 1px solid #000;
    float: right;
    background: rgba(240, 242, 245);
}
.btn{
    display: flex;
    justify-content: space-between;
    padding: 10px 38px;
    border-bottom: 1px solid #ccc;
    box-shadow: 1px 1px 0px #ccc;
    background: rgba(243, 243, 243);
    margin-bottom: 20px;
}
.bt{
    width: 100px;
    height: 40px;
    border: 1px solid #ccc;
    background: #fff;
}
.ding{
    line-height: 51px;
    color: #ccc;
}

.box-card{
    width: 1280px;
    margin: auto;
}
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
  .clearfix{
    height: 30px;
  }
  span{
    line-height: 17px;
  }
  .el-input{
    width:150px;
    font-size: 12px;
    margin-right: 5px;
  }
  .el-select{
    width: 150px;
    font-size: 12px;
    margin-right: 5px;
  }
  .zi{
    font-size: 12px;
  }
  .hui{
    width: 150px;
    margin-right: 5px;
  }
  .add{
    border: 1px solid rgb(7, 117, 242);
    color:  rgb(7, 117, 242);
  }
  .dao{
    color: red;
    font-weight: bold;
  }
  .shu{
    display: flex;
    justify-content: space-between;
    margin: 20px 20px;
  }
  .nei{
    width: 100%;
    border-bottom: 1px solid #ccc;
  }
  .a{
    text-decoration: none;
    color: blue;
    border: 0px solid #000;
    background: #fff;  }
  .el-pagination{
    float: right;
  }
  .el-icon-upload2{
    color: red;
    font-weight: bold;
  }
  .three{
    width: 20px;
    height: 20px;
    background: green;
    position: fixed;
    top: 28px;
    left: 35%;
  }
//   1
  .shi{
    color: palevioletred;
  }
 .p{
    width: 150px;
 }
 .content{
    background: #ccc;
 }
  .first{
    position: fixed;
    right: 500px;
    top: 185px;
  }
.o{
    width: 15px;
    height: 15px;
    background: yellow;
    color: #000;
    display: inline-block;
    margin-right: 100px;
}
  #ti{
    width: 5px;
    height: 5px;
    background: yellow;
    border: 0px solid #000;
    box-shadow: 2px 2px 2px #ccc;
  }
//   8
.second{
    position: fixed;
    top: 245px;
    right: 100px;
}
.pl{
    width: 100px;
    height: 30px;
}
.omg{
    float: left;
}
.el-time-select{
  margin: 20px 20px;
}
.el-input{
  margin-top: 20px;
}
.huod{
  font-size: 12px;
}
.clear{
 
  color: skyblue;
  margin-right: 10px;
}
</style>